<template>
  <div class="container">
    <el-card>
      <!-- <div slot="header">
        <div>课程：</div>
        <div>阶段：</div>
        <div>课时：</div>
      </div> -->
      <el-form label-width="40px">
        <el-form-item label="视频">
          <input ref="video-file" type="file" />
        </el-form-item>
        <el-form-item label="封面">
          <input ref="image-file" type="file" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="authUpload">开始上传</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
        <el-form-item>
          <p v-if="uploadPercent !== 0">视频上传中: {{ uploadPercent }}%</p>
          <p v-if="isUploadSuccess">
            视频转码中：{{ isTranscodeSuccess ? '完成' : '正在转码中...' }}
          </p>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
  aliyunImagUploadAddressAdnAuth,
  aliyunVideoUploadAddressAdnAuth,
  transCodeVideo,
  getAliyunTransCodePercent
} from '@/api/aliyun-oss'
@Component
export default class Video extends Vue {
  private uploader: any = null
  private videoId = null
  private imageUrl = ''
  private fileName = ''
  private uploadPercent = 0
  private isUploadSuccess = false
  private isTranscodeSuccess = false

  private created () {
    this.initUploader()
  }

  private authUpload () {
    const videoFile = (this.$refs['video-file'] as any).files[0]
    this.uploader.addFile(videoFile, null, null, null, '{"Vod":{}}')
    this.uploader.addFile(
      (this.$refs['image-file'] as any).files[0],
      null,
      null,
      null,
      '{"Vod":{}}'
    )
    this.fileName = videoFile.name
    this.uploader.startUpload()
  }

  private initUploader () {
    this.uploader = new window.AliyunUpload.Vod({
      // 阿里账号ID，必须有值 ，值的来源https://help.aliyun.com/knowledge_detail/37196.html
      userId: 1618139964448548,
      // 上传到点播的地域， 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
      region: 'cn-shanghai',
      // 分片大小默认1M，不能小于100K
      partSize: 1048576,
      // 并行上传分片个数，默认5
      parallel: 5,
      // 网络原因失败时，重新上传次数，默认为3
      retryCount: 3,
      // 网络原因失败时，重新上传间隔时间，默认为2秒
      retryDuration: 2,
      // 开始上传
      onUploadstarted: async (uploadInfo: {
        isImage: any
        file: { name: any }
      }) => {
        console.log('onUploadstarted', uploadInfo)
        let uploadAuthInfo = null
        if (uploadInfo.isImage) {
          // 图片
          const { data } = await aliyunImagUploadAddressAdnAuth()
          this.imageUrl = data.data.imageURL
          uploadAuthInfo = data.data
        } else {
          // 视频
          const { data } = await aliyunVideoUploadAddressAdnAuth({
            fileName: uploadInfo.file.name,
            imageUrl: this.imageUrl
          })
          this.videoId = data.data.videoId
          uploadAuthInfo = data.data
        }

        // console.log('uploadAuthInfo', uploadAuthInfo)

        this.uploader.setUploadAuthAndAddress(
          uploadInfo,
          uploadAuthInfo.uploadAuth,
          uploadAuthInfo.uploadAddress,
          uploadAuthInfo.videoId || uploadAuthInfo.imageId
        )
      },
      // 文件上传成功
      onUploadSucceed: function (uploadInfo: any) {
        console.log('onUploadSucceed', uploadInfo)
      },
      // 文件上传失败
      onUploadFailed: function (uploadInfo: any, code: any, message: any) {
        console.log('onUploadFailed', uploadInfo, code, message)
      },
      // 文件上传进度，单位：字节
      onUploadProgress: function (
        uploadInfo: any,
        totalSize: any,
        loadedPercent: any
      ) {
        console.log(uploadInfo, totalSize, loadedPercent)
      },
      // 上传凭证超时
      onUploadTokenExpired: function (uploadInfo: any) {
        console.log('onUploadTokenExpired')
      },
      // 全部文件上传结束
      onUploadEnd: async (uploadInfo: any) => {
        this.isUploadSuccess = true
        const { data } = await transCodeVideo({
          lessonId: this.$route.query.lessonId,
          fileId: this.videoId,
          coverImageUrl: this.imageUrl,
          fileName: this.fileName
        })
        if (data.code === '000000') {
          const timer = setInterval(async () => {
            const { data } = await getAliyunTransCodePercent(
              (this.$route.query as any).lessonId
            )
            // console.log('转码进度', data)
            if (data.code === '000000') {
              this.isTranscodeSuccess = true
              this.$message.success('视频转码成功')
              clearInterval(timer)
            }
          }, 1000)
        }
      }
    })
  }
}
</script>

<style scoped></style>
